<template>
  <el-form
    label-width="60px"
    :model="account"
    :rules="accountRules"
    ref="formRef"
  >
    <el-form-item label="账号" prop="name">
      <el-input v-model="account.name"></el-input>
    </el-form-item>
    <el-form-item label="密码" prop="password">
      <el-input v-model="account.password"></el-input>
    </el-form-item>

    <!-- @blur="accountLoginAction"  -->
  </el-form>
</template>

<script lang="ts">
import { defineComponent, reactive, ref } from "vue";
import { useStore } from "vuex";
import { accountRules } from "../config/login-account";
import { ElForm } from "element-plus";
import LocalCache from "@/utils/cache";

export default defineComponent({
  setup() {
    // 定义属性
    const store = useStore();
    const formRef = ref<InstanceType<typeof ElForm>>();
    const account = reactive({
      name: "coderwhy",
      password: "123456",
    });

    const accountLoginAction = (isKeep: boolean) => {
      // 判断是否记录密码
      formRef.value?.validate((valid) => {
        if (isKeep) {
          // console.log(valid);
        }
      });
      // 登录
      store.dispatch("loginModule/accountLoginAction", { ...account });
    };
    return {
      formRef,
      accountRules,
      account,
      accountLoginAction,
    };
  },
});
</script>
